<template>
  <el-card>
    <div style="margin-bottom: 10px;">
      <el-button type="primary" @click="handleAdd">
        新增
      </el-button>
      <ColumnSetting ref="colRef" v-model="columns" />
    </div>
    <EditTable ref="tableRef" :columns="columns" :request-api="getTableList">
      <template #status="{ row }">
        <el-tag :type="row.status ? 'success' : 'danger'">{{ row.status ? "启用" : "禁用" }}</el-tag>
      </template>
    </EditTable>
  </el-card>
</template>

<script lang="ts">
export default {
  name: "EditTableDemo",
};
</script>
<script setup lang="ts">
import { ColumnProps } from '@/types/table';
import { UserPageVO } from "@/api/user/types";
import { getUserList } from "@/api/user";

const getTableList = (params: any) => {
  let newParams = JSON.parse(JSON.stringify(params));
  newParams.createTime && (newParams.startTime = newParams.createTime[0]);
  newParams.createTime && (newParams.endTime = newParams.createTime[1]);
  delete newParams.createTime;
  return getUserList(newParams).then((res: any) => {
    res.data.list.map((item: any) => {
      item.age = item.user.detail.age
    })
    return res.data
  });
};

// 表格配置项
const columns = ref<ColumnProps<UserPageVO>[]>([
  { type: "index", label: "序号" },
  {
    prop: "username",
    label: "用户姓名",
    form: { valueType: "input" },
  },
  {
    prop: "gender",
    label: "性别",
    width: 100,
    // 字典数据
    options: [
      {
        label: "女", value: 1
      },
      {
        label: "男", value: 2
      },
    ],
    form: { 
      valueType: "select",
    },
  },
  {
    prop: "age",
    label: "年龄",
    width: 144,
    form: {
      valueType: "input-number",
    },
  },
  {
    prop: "idCard",
    label: "身份证号",
  },
  { 
    prop: "email", 
    label: "邮箱",
  },
  {
    prop: "address",
    label: "居住地址",
  },
  {
    prop: "status",
    label: "用户状态",
    options: [],
    form: {
      valueType: "select",
    },
  },
  {
    prop: "createTime",
    label: "创建时间",
    width: 180,
  },
  {
    prop: "operation",
    label: "操作",
    fixed: "right",
    width: 180,
  }
])

const tableRef = ref()

const handleAdd = () => {
  tableRef.value.addData()
};

const init = async () => {
  setTimeout(() => {
    const arr = [
      { label: "禁用", value: 0 },
      { label: "启用", value: 1 },
    ]
    const target = columns.value.find(item => item.prop === 'status')
    if (!target) return
    target.options = arr
  }, 1000);
  
}

onMounted(() => {
  init()
})
</script>

<style scoped>
</style>